<template>
	<div>
		<div v-if="active===0">
		<van-nav-bar title="意向用户报名表" />
		  <van-form @submit="save">
		    <van-field name="interest" label="兴趣专长" :rules="[{ required: true, message: '请选择兴趣专长' }]">
		      <template #input>
		        <van-checkbox-group v-model="formData.interest" direction="horizontal">
		          <van-space wrap>
					  <template v-for="item in interestData">
						  <van-checkbox v-if="item.value!='7'" :name="item.value" shape="square">{{ item.label }}</van-checkbox>
					  </template>
		          </van-space>
		        </van-checkbox-group>
		      </template>
		    </van-field>
			<van-field label="合作加盟">
					<template #input>
						<van-checkbox-group v-model="formData.interest" direction="horizontal">
						<template v-for="item in interestData" >
							<van-checkbox v-if="item.value=='7'" :name="item.value" shape="square">{{ item.label }}</van-checkbox>
						</template>
						</van-checkbox-group>
					</template>
				</van-field>
		  <van-cell-group inset>
		    <van-field
		      v-model="formData.username"
		      name="username"
		      label="姓名"
		      placeholder="填写姓名"
		      :rules="[{ required: true, message: '请填写姓名' }]"
		    />
		    <van-field
		      v-model="formData.phone"
		      name="phone"
		      label="联系方式"
		      placeholder="填写联系方式"
		      maxlength="11"
		      minlength="11"
		      :rules="[{ required: true, message: '请填写联系方式' }
		        ,{
		          pattern: /^\d{11}$/,
		          message: '手机机号不正确'
		        }
		      ]"
		      @touchstart.stop="openNumberKeyboard"
		      @focus="hideSystemKeyboard"
		    />
		    
		    <van-field name="radio" label="性别">
		  <template #input>
		    <van-radio-group v-model="formData.sex" direction="horizontal">
		      <van-radio name="男">男</van-radio>
		      <van-radio name="女">女</van-radio>
		    </van-radio-group>
		  </template>
		</van-field>
		<van-field name="radio" label="复转军人及家属">
		  <template #input>
		    <van-radio-group v-model="formData.jun" direction="horizontal">
		      <van-radio name="是">是</van-radio>
		      <van-radio name="否">否</van-radio>
		    </van-radio-group>
		  </template>
		</van-field>
		    <van-field
		      v-model="formData.area" 
		      name="area"
		      label="所在小区"
		      placeholder="所在小区"
		       @click="showPicker=true"
		       @focus="hideSystemKeyboard"
		    />
		
		    
		  </van-cell-group>
		  
		  <div style="margin: 16px;">
		    <van-button round block type="primary" native-type="submit" :disabled="disabledSubmit">
		      提交
		    </van-button>
		  </div>
		</van-form>
		
		<van-number-keyboard
		  v-model="formData.phone"
		  :show="showKeyboard"
		  @blur="showKeyboard = false"
		  
		/>
		<van-popup v-model:show="showPicker" destroy-on-close round position="bottom">
		  <van-picker
		    title="选择小区"
		    :columns="areaData"
		    :model-value="pickerValue"
		    :confirm-text="'确定'"
		    :cancel-text="'取消'"
		    @confirm="confirmArea"
		    @cancel="showPicker=false"
		  />
		</van-popup>
		</div>
		<bmMy v-if="active===1"></bmMy>
		<bmRank v-if="active===2"></bmRank>
		<van-tabbar v-model="active"> 
		<van-tabbar-item icon="comment-o">填写报名表</van-tabbar-item>
		<van-tabbar-item icon="list-switch">我的推广</van-tabbar-item> 
		  <van-tabbar-item icon="guide-o">推广排名</van-tabbar-item>
		  
		</van-tabbar>
	</div>
</template>
<script type="ts">
export default {
 name: 'bmEdit',
};
</script>
<script setup>
import { ref ,computed,watch} from 'vue'
import { useRouter,useRoute  } from 'vue-router';
import { MessagePlugin } from 'tdesign-vue-next';
import bmMy from './components/bmMy.vue'
import bmRank from './components/bmRank.vue'

import {statBm,saveBm,saveArchive,deleteArchive,getArchive} from '@/api/archives'
import {getSettingsList} from '@/api/settings'
import { defaultDocument } from '@vueuse/core';
const formData=ref({
  interest:[],
  username:'',
  sex:'男',
  phone:'',
  area:'',
  jun:'是',
  status:0,
})
const interestData=ref(
  [
    {
        "label":"就业","value":"1"
    },
    {
        "label":"志愿者","value":"2"
    },
    {
        "label":"医学","value":"3"
    },
    {
        "label":"国学","value":"4"
    },
    {
        "label":"演说","value":"5"
    },
    {
        "label":"健身","value":"6"
    }
    ,
    {
        "label":"合作加盟","value":"7"
    }
]
)
const areaData=ref([ ])
const showPicker=ref(false)
const pickerValue = ref([]);
const disabledSubmit=ref(false)
const route=useRoute()
const content = ref('')
const showKeyboard = ref(false)
const openNumberKeyboard = () => {
  showKeyboard.value = true;
};
const hideSystemKeyboard = () => {
  document.activeElement?.blur();
};
//获取可报名小区信息
const getAreas=()=>{
  getSettingsList('bm-areas')
.then(ret=>{
  console.log('ret',ret)
	if(ret)
	{
		var json=ret[0].value.replaceAll("\\n","").replaceAll("\\","").replaceAll(" ","");
		 if (json.startsWith('"')) {
		        // 使用 slice 方法去掉首尾引号
		        json= json.slice(1, -1);
		}
		if (json.endsWith('"')) {
			       // 使用 slice 方法去掉首尾引号
			       json= json.slice(1, -1);
			   }
		console.log('bm-areas',json); 
    areaData.value=JSON.parse(json)
	}
})
  formData.value.area=localStorage.getItem('bm-areas')
}
//获取兴趣专长配置
const getInterestData=()=>{
  getSettingsList('bm-interest')
.then(ret=>{
	if(ret&&ret[0])
	{
		var json=ret[0].value.replaceAll(" ","").replaceAll("\\n","").replaceAll("\\","");
    console.log('json',json)
		 if (json.startsWith('"')) {
		        // 使用 slice 方法去掉首尾引号
		        json= json.slice(1, -1);
		}
		if (json.endsWith('"')) {
			       // 使用 slice 方法去掉首尾引号
			       json= json.slice(1, -1);
			   }
		console.log('bm-interest',json); 
    interestData.value=JSON.parse(json)
	}
})
}
const setAreas=(s)=>{
   localStorage.setItem('bm-areas',s)
}

const confirmArea=({ selectedValues, selectedOptions })=>{
  showPicker.value=false
  pickerValue.value = selectedValues;
  if(selectedOptions.length>0)
  formData.value.area=selectedOptions[0].text;
}

 const fetchData=()=>{
   let id=route.params.id
  
 }
const save=()=>{ 
  try 
  {
    disabledSubmit.value=true
    formData.value.interestData=formData.value.interest.join(',')
    
    console.log(JSON.stringify(formData.value))
    
    saveBm(formData.value)
    .then(ret=>{
      showNotify({ message: '报名信息添加成功',type:'success'});
      formData.value={
        interest:[],
        username:'',
        sex:'男',
        phone:'',
        area:'',
        jun:'是',
        status:0,
      }
		
    })
    .catch(e=>{
		console.log(JSON.stringify(e))
      showNotify({ message: e.msg,type:'danger'});
    }) 
 
  }
  finally{
    disabledSubmit.value=false
  }

 }
 
 
 
 const active=ref(0)

 getAreas()
 getInterestData()
watch(()=>route.params.id,
()=>{
 if(route.params.id!=formData.value.id)
 { 
	fetchData()
	fetchStat()
 }
})

</script>
